<template>
  <div class="vote-item">
    <div class="vote-item-title">
      <router-link :to="'/wx/i/votes-'+$route.params.id" tag="div" replace class="title-left">
        <div class="title-icon">
          <i class="van-icon van-icon-arrow-left"></i>
        </div>
        <div class="title-left-cont">
          返回
        </div>
      </router-link>
      选手详情
    </div>
    <div class="vote-item-cont">
      <Scroll ref="item">
        <div>
          <cell-group class="panel-out">
            <field :value="voteUser.name" label="选手名称" disabled/>
            <field :value="voteUser.applyId" label="选手编号" disabled/>
          </cell-group>
          <panel title="选手介绍" class="panel-out">
            <div class="panel-cont" v-text="voteUser.introduce"></div>
          </panel>
          <panel title="选手风采" class="panel-out">
            <div class="panel-cont">
              <template v-if="voteUser.imgs.length > 0" v-for="t in voteUser.imgs.split(',')">
                <img :src="'https://img.sdwsl.net/'+t+'?imageView2/0/w/500/format/jpg/q/100'">
              </template>
            </div>
          </panel>
          <div style="height: 60px;"></div>
        </div>
      </Scroll>
    </div>

    <div class="vote-item-play">
      <div class="play-apply">
        <router-link :to="'/wx/i/votes-'+$route.params.id+'-apply'" replace tag="div" class="play-button">
          <div class="play-icon"><i class="van-icon van-icon-checked"></i></div>
          我要报名
        </router-link>
      </div>
      <div class="play-this">
        <div @click="vote" class="play-button">
          <div class="play-icon"><i class="van-icon van-icon-like"></i></div>
          给ta投票
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {Icon, Tab, Tabs, Button, Search, Actionsheet, Panel, Popup, Waterfall, Swipe, SwipeItem, Field, Cell, CellGroup, Loading, Toast} from 'vant'
  import vueWaterfallEasy from 'components/vue-waterfall-easy.vue'
  import Scroll from 'base/scroll/scroll'
  import FormBlock from 'components/form-block'
  import VueQiniuUpload from 'components/vue-qiniu-upload'
  import * as api from '@/api/api'

  export default {
    name: 'voteItem',
    data () {
      return {
        voteUser: {
          cover: '',
          applyId: 0,
          imgs: '',
          regTime: '',
          phone: '',
          introduce: '',
          name: ''
        }
      }
    },
    methods: {
      vote () {
        api.post({
          url: '/votes/add',
          data: {
            voteId: this.$route.params.id,
            voteUserId: this.$route.params.itemId
          },
          success: data => {
            // console.log(JSON.stringify(data))
            if (data.code === 0) {
              // 投票成功后更改首页的票数显示
              this.$emit('updateVote', this.$route.params.lr, this.$route.params.index)
              Toast.success('投票成功')
            } else {
              Toast.fail(data.msg)
            }
            setTimeout(() => {
              Toast.clear()
            }, 700)
          }
        })
      },
      getItem () {
        api.get({
          url: '/vote/user/get',
          data: {voteUserId: this.$route.params.itemId},
          success: data => {
            // console.log(JSON.stringify(data))
            this.voteUser = data.data
            setTimeout(() => {
              this.$refs.item.refresh()
            }, 500)
          }
        })
      },
      init () {
        this.getItem()
      }
    },
    computed: {},
    created () {
    },
    mounted () {
      this.init()
    },
    watch: {},
    directives: {
      WaterfallLower: Waterfall('lower')
    },
    components: {Icon, Tab, Tabs, Button, vueWaterfallEasy, Scroll, Search, Actionsheet, Panel, Popup, Waterfall, Swipe, SwipeItem, Field, Cell, CellGroup, FormBlock, Loading, VueQiniuUpload, Toast}
  }
</script>

<style lang="scss" scoped>
  // 报名
  .vote-item {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f8f8f8;
    &-title {
      height: 44px;
      line-height: 44px;
      border-bottom: 1px #ededed solid;
      text-align: center;
      font-size: 17px;
      position: relative;
      .title-left {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        text-align: left;
        padding-left: 15px;
        min-width: 50px;
        .title-icon {
          display: inline-block;
          height: 44px;
          vertical-align: middle;
        }
        .title-left-cont {
          display: inline-block;
          height: 44px;
        }
      }
    }
    &-cont {
      position: fixed;
      top: 44px;
      left: 0;
      right: 0;
      bottom: 0;
      .panel-out {
        margin-top: 10px;
        .panel-cont {
          padding: 10px 15px;
          img {
            width: 100%;
            line-height: 1;
          }
        }
      }

    }
  }

  .vote-button {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  // 投票按钮
  .vote-item-play {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: rgba(51, 51, 51, 0.75);
    display: flex;
    .play-apply, .play-this {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .play-this {
      flex: 1;
    }
    // 投票按钮
    .play-button {
      position: relative;
      padding: 0 25px;
      display: inline-block;
      border-radius: 4px;
      box-sizing: border-box;
      text-align: center;
      -webkit-appearance: none;
      color: #fff;
      background-color: #4b0;
      border: 1px solid #0a0;
      min-width: 60px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      .play-icon {
        display: inline-block;
        height: 40px;
        vertical-align: middle;
      }
    }
  }


</style>
